<template>
  <div class="dataVisual-body">
    <div class="wpbox">
      <el-row :gutter="10" style="height: 9%;" class="top_header">
        <el-col :span="8" @mouseover.native="backBtnShow = true" @mouseout.native="backBtnShow = false" style="height: 100%">
          <ul style="padding-top: 38px; padding-left: 10%; width: 100%;">
            <li><a v-show="backBtnShow" href="/index">返回系统</a></li>
          </ul>
        </el-col>
        <el-col :span="8" style="text-align: center; padding-top: 16px; font-weight: bold; letter-spacing: 8px; font-size: 18px;">
          <h1>环境监测设备数据分析</h1>
        </el-col>
        <el-col :span="8" style="padding-top: 2%; padding-right: 2.5%; text-align: right;">
          <span :class="noticeType == 'voice' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('voice')">语音播报</a></span>
          <span :class="noticeType == 'notify' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('notify')">报警提醒</a></span>
          <span :class="noticeType == 'silence' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('silence')">报警静音</a></span>
          <span class="trbtn"><a href="#" @click="touchFullScreen">{{ fullscreen }}</a></span>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="width: 96%; height: 100%; margin-left: 2%;">
        <el-col :span="6" style="height: 100%">
          <div class="aleftboxttop">
            <h2 class="tith2">设备报警事件统计</h2>
            <div class="lefttoday_tit" style=" height:8%">
              <!--              <p class="fl">地区：银滩花园</p>-->
              <p class="fr">时间段：{{ quakeEventThisYearStatistics.thisMonth }}</p>
            </div>
            <div class="lefttoday_number">
              <div class="widget-inline-box text-center fl">
                <p>总报警数</p>
                <h3 class="ceeb1fd">{{ quakeEventThisYearStatistics.monthIi + quakeEventThisYearStatistics.monthPosition + quakeEventThisYearStatistics.monthAngle }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="quakeEventThisYearStatistics.monthIi + quakeEventThisYearStatistics.monthPosition + quakeEventThisYearStatistics.monthAngle > 0">
                    <img v-show="quakeEventThisYearStatistics.monthIi + quakeEventThisYearStatistics.monthPosition + quakeEventThisYearStatistics.monthAngle > quakeEventThisYearStatistics.lastMonthIi + quakeEventThisYearStatistics.lastMonthPosition + quakeEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="quakeEventThisYearStatistics.monthIi + quakeEventThisYearStatistics.monthPosition + quakeEventThisYearStatistics.monthAngle < quakeEventThisYearStatistics.lastMonthIi + quakeEventThisYearStatistics.lastMonthPosition + quakeEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ quakeEventThisYearStatistics.lastMonthIi + quakeEventThisYearStatistics.lastMonthPosition + quakeEventThisYearStatistics.lastMonthAngle == 0 ? '-' : (100*(quakeEventThisYearStatistics.monthIi + quakeEventThisYearStatistics.monthPosition + quakeEventThisYearStatistics.monthAngle)/(quakeEventThisYearStatistics.lastMonthIi + quakeEventThisYearStatistics.lastMonthPosition + quakeEventThisYearStatistics.lastMonthAngle)).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>震动报警</p>
                <h3 class="c24c9ff">{{ quakeEventThisYearStatistics.monthIi }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="quakeEventThisYearStatistics.lastMonthIi > 0">
                    <img v-show="quakeEventThisYearStatistics.monthIi > quakeEventThisYearStatistics.lastMonthIi" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="quakeEventThisYearStatistics.monthIi < quakeEventThisYearStatistics.lastMonthIi" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ quakeEventThisYearStatistics.lastMonthIi == 0 ? '-' : (100*quakeEventThisYearStatistics.monthIi/quakeEventThisYearStatistics.lastMonthIi).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>位移报警</p>
                <h3 class="cffff00">{{ quakeEventThisYearStatistics.monthPosition }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="quakeEventThisYearStatistics.lastMonthPosition > 0">
                    <img v-show="quakeEventThisYearStatistics.monthPosition > quakeEventThisYearStatistics.lastMonthPosition" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="quakeEventThisYearStatistics.monthPosition < quakeEventThisYearStatistics.lastMonthPosition" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ quakeEventThisYearStatistics.lastMonthPosition == 0 ? '-' : (100*quakeEventThisYearStatistics.monthPosition/quakeEventThisYearStatistics.lastMonthPosition).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>倾斜报警</p>
                <h3 class="c11e2dd">{{ quakeEventThisYearStatistics.monthAngle }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="quakeEventThisYearStatistics.lastMonthAngle > 0">
                    <img v-show="quakeEventThisYearStatistics.monthAngle > quakeEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="quakeEventThisYearStatistics.monthAngle < quakeEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ quakeEventThisYearStatistics.lastMonthAngle == 0 ? '-' : (100*quakeEventThisYearStatistics.monthAngle/quakeEventThisYearStatistics.lastMonthAngle).toFixed(2) + '%' }}
                </h4>
              </div>
            </div>
            <!-- lefttoday_number end -->
          </div>
          <div class="aleftboxtmidd">
            <h2 class="tith2">设备情况统计</h2>
            <!--            <div class="lefttoday_tit height ht">-->
            <!--              <p class="fl">地区：银滩花园</p>-->
            <!--              <p class="fr">时间段：2020-06月</p>-->
            <!--            </div>-->
            <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
          </div>
          <div class="aleftboxtbott">
            <h2 class="tith2">近两月事件对比分析</h2>
            <!--<div class="lefttoday_tit height">
              <p class="fl">地区：银滩花园</p>
              <p class="fr">时间段：{{ quakeEventThisYearStatistics.lastMonth }}至{{ quakeEventThisYearStatistics.thisMonth }}</p>
            </div>-->
            <div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <div style="height: 100%">
            <div class="amiddboxttop">
              <h2 class="tith2" style="padding-top: 1.3%; margin-top: 3%;">设备分布</h2>
              <div id="centerMap" class="amiddboxttop_map" style="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div style="height: 100%">
            <div class="arightboxtop">
              <h2 class="tith2">最新报警</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ parseTime(now, '{y}-{m}-{d}') }}</p>
              </div>
              <div class="zhtc_table_title">
                <div>设备信息</div>
                <!-- 车牌 -->
                <div>报警时间</div>
                <!-- 进场时间 -->
                <div>报警值</div>
                <!-- 图片 -->
                <div>类型</div>
                <!-- 车辆类型 -->
              </div>
              <div id="zhtc_table" class="left2_table">
                <ul>
                  <li v-for="(item, i) in quakeRecentEventList" :class="i % 2 == 0 ? 'bg' : ''">
                    <div class="zhtc_table_li_content">
                      <div>
                        {{ item.clientName }}
                        <br>
                        {{ '(' + item.clientNo + ')' }}
                      </div>
                      <div>
                        {{ parseTime(item.eventTime, '{y}-{m}-{d}') }}
                        <br>
                        {{ parseTime(item.eventTime, '{h}:{i}:{s}') }}
                      </div>
                      <div>{{ item.alertValue }}</div>
                      <div>{{ eventType[item.eventType] }}</div>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
            <div class="arightboxbott">
              <h2 class="tith2 ">30日事件趋势</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ quakeThirtyDaysTrendData.days[0] }} 至 {{ quakeThirtyDaysTrendData.days[quakeThirtyDaysTrendData.days.length-1] }}</p>
              </div>
              <div id="arightboxbott" class="arightboxbottcont"></div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-dialog :title="alertTitle" :visible.sync="alertDialogVisible" :modal="false" custom-class="alert_dialog" style="margin-top: 16vh; color: #FFFFFF"  width="30%" center>
        <div style="height: 25vh; text-align: center;">
          <div style="width: 100%; height: 50%; text-align: center;">
            <div :class="alertDivClass" style="position: relative; top: 0%;"></div>
            <div style="z-index: 999; position: absolute; top: 30%; font-size: 2vw; width: 90%; text-align: center;">
              {{ currentAlertData.alertValue ? parseFloat(currentAlertData.alertValue).toFixed(1) : '' }}{{ currentAlertData.eventType == 'position' ? 'mm' : '°' }}
            </div>
          </div>
          <el-descriptions :column="2" title="报警信息" style="background: #ffffff00; color: #FFFFFF">
            <el-descriptions-item label="设备编号">{{ currentAlertData.clientNo }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ currentAlertData.client ? currentAlertData.client.clientName : '' }}</el-descriptions-item>
            <el-descriptions-item label="管理人员">{{ currentAlertData.client ? currentAlertData.client.nickName : '' }}</el-descriptions-item>
            <el-descriptions-item label="报警时间">{{ parseTime(currentAlertData.eventTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item label="所在位置">{{ currentAlertData.client ? currentAlertData.client.address : '' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alertDialogVisible = false">取 消</el-button>
          <el-button @click="alertDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div hidden="hidden">
      <button class="butt" @click="auditPlay"></button>
      <audio ref="audio" class="aud">
        <source src="@/assets/audio/quake_alert.mp3" />
      </audio>
    </div>
  </div>
</template>

<style>
.el-descriptions__body{
  background: #FFFFFF00;
  color: #FFFFFF;
}
</style>

<script>
import '@/assets/styles/visual/dataVisual.css'
import echarts from 'echarts'
import { quakeDataVisual, thirtyDaysQuakeEventTrend } from "@/api/device/quakeStatistics";
import screenfull from "screenfull";

export default {
  name: "QuakeStatistics",
  data() {
    return {
      backBtnShow: false,
      alertDivClass: 'alert_img alert_img_Ii',
      alertTitle: "报警",
      alertDialogVisible: false,
      currentAlertData: {},
      noticeType: 'voice',
      now: new Date(),
      eventType: {
        'Ii': '震动',
        'position': '位移',
        'angle': '倾斜'
      },
      onlineIcon: require('@/assets/images/visual/dataVisual/device-online.png'),
      offlineIcon: require('@/assets/images/visual/dataVisual/device-offline.png'),
      dormancyIcon: require('@/assets/images/visual/dataVisual/device-dormancy.png'),
      map: null,
      clientMarkerMap: null,
      baiduMapInfoWindow: null,
      quakeClientList: [],
      quakeClientStat: {
        onlineCount: 0,
        offlineCount: 0,
        dormancy: 0,
      },
      quakeRecentEventList: [],
      quakeEventThisYearStatistics: {
        thisMonth: '####年##月',
        lastMonth: '####年##月',
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      },
      quakeEventStat: {
        totalCount: 0,
        IiCount: 0,
        positionCount: 0,
        angleCount: 0
      },
      quakeThirtyDaysTrendData: {
        days: [],
        IiList: [],
        totalList: [],
        positionList: [],
        angleList: []
      },
      deviceStatisticsChart: null,
      recentTwoMonthStatChart: null,
      deviceStatisticsChartOption: null,
      recentTwoMonthStatChartOption: null,
      quakeThirtyDaysTrendChart: null,
      quakeThirtyDaysTrendChartOption: null,
      fullscreen: '全屏显示'
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
      this.getQuakeDataVisual()
      this.getQuakeThirtyDaysEventTrend()
      this.initCenterMap();
      this.$store.dispatch('websocketSubscribe', {'topic': 'quakeEventMsg'})
      this.$store.dispatch('wsAddCallback', {'topic': 'quakeEventMsg',  'cb': this.wsOnMessage});
    })
  },
  mounted: function () {
    const that = this;
    this.$nextTick(() => {
      window.addEventListener('resize',function(){
        // 重新定义charts
        that.deviceStatisticsChart.resize();
        that.recentTwoMonthStatChart.resize();
        that.quakeThirtyDaysTrendChart.resize();
      })
    })
  },
  destroyed() {
    this.$store.dispatch('wsRemoveCallback', {'topic': 'quakeEventMsg',  'cb': _this.wsOnMessage});
  },
  methods: {
    touchFullScreen(){
      if(this.fullscreen == '全屏显示'){
        this.fullscreen = '取消全屏';
      }else{
        this.fullscreen = '全屏显示';
      }
      screenfull.toggle()
    },
    wsOnMessage(msg){
      console.log("收到回调消息：", msg)
      if(msg.topic == 'quakeEventMsg'){
        let data = msg.data;
        let eventType = data.eventType;
        if(eventType == "Ii"){
          this.alertTitle = "震动报警";
          this.alertDivClass = 'alert_img alert_img_Ii';
        }else if(eventType == "position"){
          this.alertTitle = "位移报警";
          this.alertDivClass = 'alert_img alert_img_position';
        }else if(eventType == "angel"){
          this.alertTitle = "倾斜报警";
          this.alertDivClass = 'alert_img alert_img_angel';
        }
        this.auditPlay();
        this.currentAlertData = data;
        this.alertDialogVisible = true;
      }
    },
    auditPlay(){
      let music1 = new Audio();
      if(this.noticeType == 'voice'){
        if(this.currentAlertData.eventType == 'Ii'){
          music1 = require("@/assets/audio/quake_alert.mp3");
        }else if(this.currentAlertData.eventType == 'position'){
          music1 = require("@/assets/audio/position_alert.mp3");
        }else if(this.currentAlertData.eventType == 'angle'){
          music1 = require("@/assets/audio/angle_alert.mp3");
        }
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }else if(this.noticeType == 'notify'){
        music1 = require("@/assets/audio/warning.mp3");
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }
    },
    noticeTypeChange(noticeType){
      this.noticeType = noticeType;
    },
    getQuakeDataVisual(){
      quakeDataVisual().then(response => {
        this.quakeClientList = response.data.quakeClientList;
        this.quakeRecentEventList = response.data.quakeEventList;
        this.quakeEventThisYearStatistics = response.data.quakeEventThisYearStatistics;
        this.initRecentTwoMonthStat();
        this.initClientMarkers();
      });
    },
    getQuakeThirtyDaysEventTrend(){
      thirtyDaysQuakeEventTrend().then(response => {
        this.quakeThirtyDaysTrendData = response.data;
        this.initThirtyDaysQuakeEventTrend();
      });
    },
    initCenterMap(){
      let _this = this;
      _this.map = new BMapGL.Map("centerMap");
      _this.map.addControl(new BMapGL.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_EARTH_MAP]}));          //2D图，卫星图
      // let point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
      //    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
      _this.map.centerAndZoom(new BMapGL.Point(120.282737,36.192915), 11);// 初始化地图，设置中心点坐标和地图级别，全国地图
      _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // _this.map.setMapStyleV2({ styleJson: _this.baiduMapStyle() });
      // _this.map.setMapType(BMAP_EARTH_MAP);
    },
    initClientMarkers(){
      let _this = this;
      let clientList = this.quakeClientList;
      _this.map.clearOverlays();
      _this.clientMarkerMap = {};
      _this.quakeClientStat = {
        onlineCount: 0,
        offlineCount: 0,
        dormancyCount: 0
      }
      for(let i in clientList){
        let client = clientList[i];
        _this.addMapMarker(client);
        if(client.clientStat == 'online'){
          _this.quakeClientStat.onlineCount ++;
        }else if(client.clientStat == 'offline'){
          _this.quakeClientStat.offlineCount ++;
        }else if(client.clientStat == 'dormancy'){
          _this.quakeClientStat.dormancyCount ++;
        }
      }
      this.initDeviceStatistics();
    },
    addMapMarker(client){
      let _this = this;
      // 创建设备图标
      let pic = client.clientStat == 'online' ? _this.onlineIcon : client.clientStat == 'dormancy' ? _this.dormancyIcon : _this.offlineIcon;
      // 创建Marker标注，使用设备图标
      let longitude = client.longitude;
      let latitude = client.latitude;
      let pt = new BMapGL.Point(longitude, latitude);
      let myIcon = new BMapGL.Icon(pic, new BMapGL.Size(40, 40));
      // myIcon.setImageOffset(new BMapGL.Size(15, 20));
      let marker = new BMapGL.Marker(pt, {
        icon: myIcon
      });
      // 将标注添加到地图
      _this.map.addOverlay(marker);
      marker.addEventListener("click", function(){
        let opts = {
          width : 200,     // 信息窗口宽度
          height: 100,     // 信息窗口高度
          title : client.clientName , // 信息窗口标题
          message: client.clientName
        }
        if(_this.baiduMapInfoWindow){
          _this.baiduMapInfoWindow.close();
        }
        let text = "设备地址：" + client.address + "</br>" + "经纬度：" + client.longitude + "," + client.latitude + "</br>" + "设备编号：" + client.clientNo;
        _this.baiduMapInfoWindow = new BMapGL.InfoWindow(text, opts);  // 创建信息窗口对象
        _this.map.openInfoWindow(_this.baiduMapInfoWindow, pt);// 打开信息窗口
        _this.map.centerAndZoom(marker.getPosition(), 11);
      });
      _this.clientMarkerMap[client.clientNo] = marker;
    },
    initCharts(){
      this.deviceStatisticsChart = echarts.init(document.getElementById('aleftboxtmidd'));
      this.recentTwoMonthStatChart = echarts.init(document.getElementById('aleftboxtbott'));
      this.quakeThirtyDaysTrendChart = echarts.init(document.getElementById('arightboxbott'));
    },
    initDeviceStatistics(){
      let _this = this;
      _this.deviceStatisticsChartOption = {
        backgroundColor: 'rgba(1,202,217,.2)',
        legend:{
          orient: 'vertical', // 'vertical'
          x: 'left', // 'center' | 'left' | {number},
          y: '80', // 'center' | 'bottom' | {number}
          padding: 10,    // [5, 10, 15, 20]
          itemGap: 20,
          textStyle: {color: '#c3cad9'},
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
        series: [{
          name: '在线状态',
          type: 'pie',
          radius: '50%',
          selectedMode: 'single',
          selectedOffset: 10,
          clockwise: true,
          center: ['50%', '50%'],
          color: ['#33ff99', '#43cadd', '#ff6464'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [{
            value: _this.quakeClientStat.onlineCount,
            name: '在线',
          },{
            value: _this.quakeClientStat.offlineCount,
            name: '离线',
          },
            {
              value: _this.quakeClientStat.dormancyCount,
              name: '休眠'
            }
          ].sort(function(a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',
          label: {
            normal: {
              // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
              formatter: ['{b|{b}{d}%}', '{c|{c}台}'].join('\n'),
              rich: {
                b: {
                  color: '#d9efff',
                  fontSize: 14,
                  height: 40
                },
                c: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight:'bold',
                  lineHeight: 5
                },
              },
            }
          },
          labelLine: {
            normal: {
              backgroundColor:'yellow',
              borderColor:'skyblue',
              borderWidth:10,
              lineStyle: {
                borderColor:'skyblue',
                borderWidth:10,
                backgroundColor:'yellow',
              }
            },
          }
        }]
      };
      _this.deviceStatisticsChart.setOption(_this.deviceStatisticsChartOption);
    },
    initRecentTwoMonthStat(){
      let _this = this;
      _this.recentTwoMonthStatChartOption = {
        color: ['#7ecef4'],
        backgroundColor: 'rgba(1,202,217,.2)',
        legend: {
          right: 10,
          top: 5,
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.6)'
          },
          data: [ _this.quakeEventThisYearStatistics.lastMonth, _this.quakeEventThisYearStatistics.thisMonth ]
        },
        grid: {
          left: 20,
          right: 20,
          top: 30,
          bottom: 2,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,0)"
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,.5)"
          },
          data: ['震动', '位移', '倾斜']
        },
        series: [{
          name: _this.quakeEventThisYearStatistics.lastMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(77,114,217,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(117,72,159,.7)'
                }]
              )
            }
          },
          data: [ _this.quakeEventThisYearStatistics.lastMonthIi, _this.quakeEventThisYearStatistics.lastMonthPosition, _this.quakeEventThisYearStatistics.lastMonthAngle ]
        }, {
          name: _this.quakeEventThisYearStatistics.thisMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(230,253,139,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(41,220,205,.7)'
                }]
              )
            }
          },
          data: [ _this.quakeEventThisYearStatistics.monthIi, _this.quakeEventThisYearStatistics.monthPosition, _this.quakeEventThisYearStatistics.monthAngle ]
        }]
      };
      _this.recentTwoMonthStatChart.setOption(_this.recentTwoMonthStatChartOption);
    },
    initThirtyDaysQuakeEventTrend(){
      let _this = this;
      _this.quakeThirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.6)'
          },
          data: ['震动', '位移','倾斜','总报警数']
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: 15,
          right: 15,
          top: 35,
          bottom: 10,
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: _this.quakeThirtyDaysTrendData.days,
            axisLabel: {
              color: "#FFFFFF",
              fontSize: 10,
              interval: 'auto', // x轴间距
              // rotate:40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              fontSize: 10,
              color: "#FFFFFF",
            }
          },
          {
            type: 'value',
            name: '事件数',
            nameTextStyle: {
              color: '#ffffff',
            },
            splitLine:{show: false},//去除网格线
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisTick: {show: false},
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#ffffff',
            }
          }
        ],
        series: [
          {
            name: '震动',
            type: 'bar',
            color:['#0099ff'],
            data: _this.quakeThirtyDaysTrendData.IiList,
            itemStyle: {
              normal: {
                color: '#ff8400'
              }
            }
          },
          {
            name: '位移',
            type: 'bar',
            color:['#ff0000'],
            data: _this.quakeThirtyDaysTrendData.positionList,
            itemStyle: {
              normal: {
                color: '#ff0000'
              }
            }
          },
          {
            name: '倾斜',
            type: 'bar',
            color:['#fff200'],
            data: _this.quakeThirtyDaysTrendData.angleList,
            itemStyle: {
              normal: {
                color: '#fff200'
              }
            }
          },
          {
            name: '总报警数',
            type: 'line',
            color:['#00fff6'],  //折线条的颜色
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              hadowBlur: 2,
            },
            data:  _this.quakeThirtyDaysTrendData.totalList
          },
        ]
      };
      _this.quakeThirtyDaysTrendChart.setOption(_this.quakeThirtyDaysTrendChartOption)
    },
  }
};
</script>
